<template>
  <view>
    
    <view class="resver-address">
      <view class="btn" v-if="JSON.stringify(address) === '{}'">
        <button type="primary" size="mini" @click="checkAdres">请选择收货地址+</button>
      </view>
      
      <view class="adressTxt" v-else @click="checkAdres">
        <view class="up">
          <view class="user"><text>收货人：{{address.userName}}</text></view>
          <view class="phone">
            <text>电话：{{address.telNumber}}</text>
            <uni-icons type="forward" size="17"></uni-icons>
          </view>
        </view>
        
        <view class="adres">
          <text>收货地址：{{addstr}}
          </text>
        </view>
        
      </view>
      
    </view>
    <image src="../../static/cart_border@2x.png" style="height: 5px;width: 100%;"></image>
    
  </view>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from 'vuex'
  
  export default {
    name:"my-address",
    computed: {
      ...mapState('my_adress',['address']),
      ...mapGetters('my_adress', ['addstr']),
    },
    
    methods:{
      ...mapMutations('my_adress',['getAdress']),
      
      async checkAdres(){
        const [err,succ] = await uni.chooseAddress().catch(err=>console.log(err))
        if(err==null&&succ.errMsg=="chooseAddress:ok"){
          this.getAdress(succ)
        }
        
      }
    },
    
  }
</script>

<style lang="scss">
.resver-address{
  // border: 1px solid red;
  height: 60px;
  .btn{
    line-height: 60px;
    text-align: center;
    button{
      vertical-align: middle;
    }
  }
  .adressTxt{
    padding: 10px 5px;
    .up{
      display: flex;
      justify-content: space-between;
      padding-bottom: 7px;
    }
    .adres{      
      white-space: nowrap;
    }
  }
  
}
</style>